<template>
  <div class="clearfix">
    <a-upload :beforeUpload="beforeUpload" class="upload-list-inline" :showUploadList="false">
      <a-button>
        <a-icon type="upload" />上传图片/视频
      </a-button>
    </a-upload>
  </div>
</template>
<script>
import { uploadPic } from '@/api/login'

export default {
  data() {
    name: 'uploadMp4'
    return {
      previewVisible: false,
      previewImage: '',
      fileList: []
    }
  },
  methods: {
    beforeUpload(file) {
      const _this = this
      const formData = new FormData()
      const isJpgOrPng =
        file.type === 'image/jpeg' ||
        file.type === 'image/png' ||
        file.type === 'image/svg' ||
        file.type === 'image/jpg' ||
        file.type === 'image/gif' ||
        file.type === 'video/ogg' ||
        file.type === 'video/flv' ||
        file.type === 'video/avi' ||
        file.type === 'video/wmv' ||
        file.type === 'video/mov' ||
        file.type === 'video/mp4'
      if (!isJpgOrPng) {
        this.$message.error('只能上传图片/视频！')
        return
      }
      formData.append('file', file)
      formData.append('school_id', this.$store.state.user.school)
      this.$emit('btnStartLoading', true)
      uploadPic(formData)
        .then(res => {
          _this.$emit('url', res.url, file.type)
        })
        .catch(err => {
          this.$emit('btnStartLoading', false)
          _this.$message.error(err.data.message || '上传失败,请检查上传文件或稍后重试')
        })
      return false
    },
    handleCancel() {
      this.previewVisible = false
    }
  }
}
</script>
<style scoped>
.upload-list-inline >>> .ant-upload-list-item {
  float: left;
  width: 200px;
  margin-right: 8px;
}
.upload-list-inline >>> .ant-upload-animate-enter {
  animation-name: uploadAnimateInlineIn;
}
.upload-list-inline >>> .ant-upload-animate-leave {
  animation-name: uploadAnimateInlineOut;
}
</style>